import React, { Component } from "react";
// 组件
import MainLayout from "@component/mainLayout/mainLayout";
import Button from "@component/button/index";

import { openWebView, openBrowser } from "@tools/native/navigate";
import yhTools from "@tools/yh";

import { sSecurityUrl } from "@config/Config";

import logo_sz_security from "@images/logo_sz_security.png";

import "./index.scss";

/**
 * 描述：山证页面
 * 作者：zenghq
 * 日期：2021-04-22
 */
class index extends Component {
	constructor(props) {
		super(props);
		this.state = {
			time: 3,
			btnDisabled: true
		};
		this.interval = null; // 倒计时计时器
	}
	/*******************生命周期 start************************/
	componentDidMount = () => {
		this.downTime();
	};
	componentWillUnmount = () => {
		this.clearInterval();
	};
	/*******************生命周期 end************************/

	/*******************业务方法 start************************/
	downTime() {
		let { time } = this.state;
		this.interval = setInterval(() => {
			if (time < 1) {
				this.setState({
					btnDisabled: false
				});
				this.clearInterval();
			} else {
				this.setState({
					time: time--
				});
			}
		}, 1000);
	}
	clearInterval() {
		if (this.interval) {
			clearInterval(this.interval);
			this.interval = null;
		}
	}
	/*******************业务方法 end************************/

	/*******************点击事件 start************************/
	openClick = () => {
		if (yhTools.platform() == "ios") {
			openBrowser(`${sSecurityUrl}?ts=${new Date().getTime()}`);
		} else {
			openWebView({
				url: `${sSecurityUrl}?ts=${new Date().getTime()}`
			});
		}
	};
	/*******************点击事件 end************************/

	/**渲染 */
	render() {
		const { time, btnDisabled } = this.state;
		const _pageParams = {
			header: {
				title: "山西证券",
				goToApp: true
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};
		return (
			<MainLayout pageParams={_pageParams}>
				<div className="s_security-content">
					{/* 标题栏 */}
					<section className="top-box">
						<div className="title-box">
							<img className="logo" src={logo_sz_security} alt="logo" />
							<span className="title">山西证券</span>
						</div>
						<div className="tip">正在跳转山西证券页面…</div>
					</section>
					{/* 内容部分 */}
					<section className="content-text">
						永辉作为信息展示平台为山西证券提供链接跳转等信息辅助服务，山西证券对发布内容的真实性、准确性、完整性、合法性和有效性负责。投资人通过永辉平台发布的链接信息跳转至山西证券页面发生的任何交易行为，产生的风险由投资人自行承担，永辉不对该交易行为做任何明示或默示担保。因该等交易行为产生的任何纠纷，由投资人和山西证券之间自行解决，永辉对此不承担任何责任。
					</section>
					<Button
						disabled={btnDisabled}
						onClick={this.openClick}
						className="button"
					>
						{btnDisabled ? `${time}秒后确认` : "确认"}
					</Button>
				</div>
			</MainLayout>
		);
	}
}

export default index;
